<style>
  body{font-size: 12px;}
  ul li{list-style: none;}
  .track-rcol{border: 1px solid #eee;}
  .track-list{margin: 20px; padding-left: 5px; position: relative;}
  .track-list li{position: relative; padding: 9px 0 0 25px; line-height: 18px; border-left: 1px solid #d9d9d9; color: #999;}
  .track-list li.first{color: red; padding-top: 0; border-left-color: #fff;}
  .track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(/images/order-icons.png)  -21px -72px no-repeat;}
  .track-list li.first .node-icon{background-position:0 -72px;}
  .track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
  .track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
  .track-list li.first .time{margin-right: 20px; }
  .track-list li.first .txt{max-width: 600px; }
  .invisible {
    display: none;
  }
</style>
<header class="mui-bar mui-bar-nav header">
  <h1 class="mui-title">物流详情</h1>
</header>
<div class="mui-content">
  <div class="track-rcol">
    <div class="track-list">
      <ul>

      </ul>
    </div>
  </div>
  <div style="text-align: center">
    <button type="button" class="mui-btn mui-btn-primary">点击显示所有物流信息</button>
  </div>
</div>
<script>
  $(function () {
    $.get('/api/orders/<%= id%>/shipping/', function (call) {
        var html = '';
        for (var i=0; i<call.length; i++){
            html += '<li><i class="node-icon"></i><span class="time">'+call[i].time+'</span><span class="txt">'+call[i].context+'  【'+call[i].location+'】</span></li>'
        }
        $('.track-list>ul').html(html);
        $('ul li').first().addClass('first');
        $('ul li:gt(2)').each(function () {
          $(this).addClass('invisible');
        })
    })
  })
  $('.mui-btn').click(function () {
    $('.invisible').each(function () {
      $(this).removeClass('invisible');
    });
  })
</script>
